<template>
  <view class="service">
    <!-- <view class="title">
      <image
        class="icon-img"
        src="/static/images/icon/service.png"
        mode="scaleToFill"
      />
      <view class="text">校园服务</view>
    </view> -->
    <view class="content">
      <view class="list">
        <view
          class="item"
          v-for="item in list"
          :key="item.type"
          @click="handleClick(item)"
        >
          <view
            class="icon-box"
            :style="{
              backgroundColor: item.bg,
            }"
          >
            <image
              class="icon-img"
              :src="`/static/images/icon/${item.icon}.png`"
              mode="scaleToFill"
            />
          </view>
          <view class="name">{{ item.name }}</view>
        </view>
      </view>
    </view>

    <view class="food">
      <view class="campus-canteen">
        <view class="text-description">
          <view class="text">校园食堂</view>
          <view class="description">校园美食盛宴</view>
        </view>
        <view class="img-box">
          <image src="/static/images/home/canteen.png" mode="scaleToFill" />
        </view>
      </view>
      <view class="outside-takeout">
        <view class="text-description">
          <view class="text">校外外卖</view>
          <view class="description">校外便捷外卖</view>
        </view>
        <view class="img-box">
          <image src="/static/images/home/takeout.png" mode="scaleToFill" />
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import Router from "@/router";

interface ServiceItem {
  name: string;
  icon: string;
  type: string;
  bg: string;
  path: string;
}

const list = [
  {
    name: "快递代取",
    icon: "substitute",
    type: "substitute",
    bg: "rgba(18, 150, 219,0.1)",
    path: "/pages/serviceModule/expressDeliveryList/index",
  },
  {
    name: "代购服务",
    icon: "shopping",
    type: "shopping",
    bg: "rgba(230, 131, 37,0.1)",
    path: "",
  },
  {
    name: "交易市场",
    icon: "trading-market",
    type: "tradingMarket",
    bg: "rgba(224, 43, 43,0.1)",
    path: "",
  },
  {
    name: "急事代办",
    icon: "service",
    type: "service",
    bg: "rgba(237, 85, 87,0.1)",
    path: "",
  },
  {
    name: "找兼职",
    icon: "part-timeJob",
    type: "partTimeJob",
    bg: "rgba(130, 97, 40,0.1)",
    path: "",
  },
  {
    name: "游戏代练",
    icon: "game",
    type: "game",
    bg: "rgba(86, 119, 211,0.1)",
    path: "",
  },
  {
    name: "失物招领",
    icon: "lost-found",
    type: "lostFound",
    bg: "rgba(232, 162, 67,0.1)",
    path: "",
  },
  {
    name: "其他委托",
    icon: "task",
    type: "task",
    bg: "rgba(204, 135, 250,0.1)",
    path: "",
  },
];

const handleClick = (item: ServiceItem) => {
  if (!item.path) {
    uni.showToast({
      title: "敬请期待",
      icon: "none",
    });
    return;
  }

  Router.push(item.path);
};
</script>
<style lang="scss" scoped>
.service {
  .title {
    display: flex;
    align-items: center;
    .icon-img {
      width: 40rpx;
      height: 40rpx;
      display: block;
      margin-right: 10rpx;
    }
    .text {
      color: #222;
      font-size: 32rpx;
      font-weight: bold;
    }
  }
  .content {
    background-color: #fff;
    // margin-top: 20rpx;
    padding: 0 30rpx;
    border-bottom-left-radius: 36rpx;
    border-bottom-right-radius: 36rpx;
    box-shadow: 0 2rpx 0rpx rgba(0, 0, 0, 0.03);
    .list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 40rpx 0;
      padding: 20rpx 0 30rpx 0;
      .item {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        .icon-box {
          width: 100rpx;
          height: 100rpx;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          image {
            width: 65rpx;
            height: 65rpx;
          }
        }

        .name {
          font-size: 26rpx;
          font-size: #888;
          margin-top: 10rpx;
        }
      }
    }
  }
  .food {
    margin-top: 30rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30rpx;
    padding: 0 30rpx;
    .campus-canteen,
    .outside-takeout {
      position: relative;
      display: flex;
      align-items: center;
      height: 180rpx;
      border-radius: 36rpx;

      .text-description {
        margin-left: 30rpx;
        .text {
          font-size: 36rpx;
          font-weight: bold;
          color: #fff;
        }
        .description {
          font-size: 24rpx;
          color: #e0e0e0;
          margin-top: 10rpx;
        }
      }

      .img-box {
        position: absolute;
        right: 10rpx;
        bottom: -5rpx;
        image {
          width: 100rpx;
          height: 100rpx;
        }
      }
    }

    .campus-canteen {
      background: linear-gradient(90deg, #3489f8, #2666bbff);
    }

    .outside-takeout {
      background: linear-gradient(90deg, #c27329, #b1641d);
    }
  }
}
</style>
